<!--
 * @Description: 修改用户密码
 * @Date: 2023-08-04 11:42:41
 * @FilePath: \hk-marketing-crm\src\views\system\user\userDialog.vue
-->
<template>
	<div class="system-user-dialog-container">
		<el-dialog center align-center v-model="state.dialog.isShowDialog" width="35%" @close="resetData">
			<template #header="{ titleClass }">
				<div :class="titleClass">修改密码</div>
			</template>
			<el-form ref="userDialogFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="120px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="用户姓名" prop="username">
							<el-input v-model="state.ruleForm.username" placeholder="请输入用户姓名" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="输入旧密码" prop="oldPassWord">
							<el-input v-model="state.ruleForm.oldPassWord" placeholder="请输入旧密码" type="password" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="输入新密码" prop="passWord">
							<el-input v-model="state.ruleForm.passWord" placeholder="请输入新密码" type="password" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="确认新密码" prop="passWordCopy">
							<el-input v-model="state.ruleForm.passWordCopy" placeholder="请确认新密码" type="password" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">确认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="userDialog">
import { reactive, ref, nextTick } from 'vue';
import { useUserApi } from '/@/api/user/index';
import { ElMessage, ElNotification } from 'element-plus';
import JSEncrypt from 'jsencrypt';
import { useUserInfo } from '/@/stores/userInfo';
import { storeToRefs } from 'pinia';

const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const userDialogFormRef = ref();
const state: any = reactive({
	ruleForm: {
		id: '', // 用户id
		username: '', // 用户姓名
		oldPassword: '', // 旧密码
		passWord: '', // 新账户密码
		passWordCopy: '', // 确认密码
	},
	dialog: {
		isShowDialog: false,
		isAdd: true,
	},
	rules: {
		oldPassWord: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
		passWord: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
		passWordCopy: [{ required: true, message: '请确认新密码', trigger: 'blur' }],
	},
});

// 打开弹窗
const openDialog = async () => {
	state.dialog.isShowDialog = true;
	state.ruleForm.id = userInfos.value.userId;
	state.ruleForm.username = userInfos.value.userName;
};

// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

// 表单清空
const resetData = () => {
	nextTick(() => {
		userDialogFormRef.value.resetFields();
	});
};

// 提交
const onSubmit = () => {
	userDialogFormRef.value.validate((valid: any) => {
		if (valid) {
			if (state.ruleForm.passWord === state.ruleForm.passWordCopy) {
				const crypt: any = new JSEncrypt();
				crypt.setKey(import.meta.env.VITE_PUBLIC_kEY);
				let param = {
					id: state.ruleForm.id, // 用户id:
					oldPwd: crypt.encrypt(state.ruleForm.oldPassWord), // 旧密码:
					pwd: crypt.encrypt(state.ruleForm.passWord), // 密码;
				};
				doChangePassword(param);
			} else {
				ElMessage({
					message: '新密码不一致',
					type: 'warning',
				});
			}
		} else {
			ElNotification({
				title: '提示',
				message: '校验失败,请填写完整信息',
				position: 'top-right',
				type: 'error',
			});
		}
	});
};

// 修改密码
const doChangePassword = async (param: any) => {
	const data = await useUserApi().updatePwd(param);
	if (data.code == 200) {
		ElNotification({
			title: '提示',
			message: '修改密码成功',
			position: 'top-right',
			type: 'success',
		});
		closeDialog();
	}
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style scoped lang="scss">
:deep(.el-dialog__header) {
	width: 100%;
	height: 60px;
	background-color: #5e8dff;
}

:deep(.el-dialog__header .el-dialog__title) {
	font-size: 20px;
	color: #fff;
}

:deep(.el-dialog__header .el-dialog__close) {
	color: #fff;
}
</style>
